<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录注册页面</title>
  <link rel="shortcut icon" type="image/x-icon" href="../../image/favion.ico">
  <link rel="stylesheet" href="../../css2/base.css">
  <link rel="stylesheet" href="../../iconfont/iconfont.css">
  <link rel="stylesheet" href="../../css2/login.css">
  <script src="../../iconfont/iconfont.js"></script>
  <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

  <style>
    .icon {
      width: 1.5em;
      height: 1.5em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
    }
    </style>
</head>
<body>
  <div class="box">
    <div class="login_box">
        <h3>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-lu"></use>
          </svg>
          &nbsp;Login
        </h3>
           <form class="login" id="login">
            <p>
              <input type="text"  name="username" class="accound" placeholder="请输入您的用户名">
            </p>
            <p>
              <input type="password" name="psw" class="password" placeholder="请输入您的密码">
<%--                <span><img src="../iconfont/hideeye.png"></span>--%>
            </p>
            <p>
              <input type="text" id="_code" name="_code" placeholder="请输入验证码" style="width: 140px">
              <input type="button" id="_codebtu" class="code" value="获取验证码"/></p>
            <p>
<%--              <span style="margin-left: -130px;position: absolute;margin-top: 10px"><font color="maroon">您的验证码是：</font></span>--%>
              <span style="margin-left: -130px;position: absolute;margin-top: 10px"><font  id="_codetips" color="maroon" ></font></span>
            </p>
            <p>
                <input type="button" id="tour" class="tour"  value="游客模式"  href="${pageContext.request.contextPath}/index/0.htm"></input>
              <input class="submit"  type="submit" value="立即登录">
              <a class="register">前往注册</a>
            </p>
           </form>
    
    </div>
  </div>
  <script src="/js2/fairyDustCursor.js"></script>

<script>

  var code1=0;
  $('.register').click(function () {
    window.location.href = "loginAndRegister2.jsp";
    return false;
  });

  $("#tour").click(function () {
          window.location.href = "/web/blogger/tour.do";
      }
  )
  $("#_codebtu").click(function(){			//登录点击事件生成验证码
    //生成算数验证码
    var one = parseInt(Math.random()*100);
    var two = parseInt(Math.random()*100);
    var three = parseInt(Math.random()*10);
    var four = parseInt(Math.random()*10);
    code1 = three+four;
    $("#_codetips").html('您的验证码为: '+three+'+'+four+' 的结果');
  });

  function checkcode(a,c){						//验证码校验
    if(c!=null){
      if(a==c){
        console.log("生成："+c+" 输入:"+a);
        // b.html("<font color='green'>验证码正确</font>");
        return true;
      }else{
        // b.html("<font color='red'>请输入正确的验证码</font>");
        return false;
      }
    }else{
      return false;
    }
  }

  //自定义验证码校验方法
  jQuery.validator.addMethod('testCode',function (value){
    if(checkcode(value,code1)){
      return true
    }
    return false
  },'验证码输入错误');


  $('#login').validate({
    rules: {
      _code: {
        required: true,
        testCode: true,
      }
    },
    messages: {
      _code: {
        required: "请输入验证码！",
      }
    },
    submitHandler: function () {
      layui.use(['form', 'jquery'], function () {

        // var $ = layui.jquery,
        //     form = layui.form,
        var layer = layui.layer;

        $('.submit').click(function () {
          $.ajax({
            'url': '/web/blogger/login.do',
            'data': {
              userName: $('.accound')[0].value,
              password: $('.password')[0].value
            },
            'method': 'post',
            success: function (e) {
              if (e.code == '0') {
                  window.sessionStorage.setItem("username",e.username);
                  window.sessionStorage.setItem("userid",e.id);
                  // document.cookie="username=e.username";
                layer.msg(e.username+'  登录成功！', function () {
                  window.location.href = '../blogg/main.jsp';
                });
              } else {
                layer.msg('用户名密码错误');
              }
            },
            error: function () {
              layer.msg("error");
            }
          });
        })
      })
    }
  })
</script>
  <script src="../../lay-ui/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
</body>
</html>